<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/plugins/layui/css/layui.css">
    <script src="static/plugins/jquery-3.1.0.js"></script>
    <script src="static/plugins/layui/layui.js"></script>
    <script src="static/js/button-power.js"></script>
    <style>
        .layui-form-label {
            width: 80px;
        }
    </style>
</head>
<body style="background-color: #eee;padding: 15px">
<div class="layui-card">
    <div class="layui-card-body">
            <span class="layui-breadcrumb">
                <a href="javascript:;">汽车管理</a>
                <a href="javascript:;">品牌信息</a>
                <a><cite>品牌列表</cite></a>
            </span>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" id="searchForm" lay-filter="searchForm">
            <div class="layui-form-item layui-inline">
                <label for="name" class="layui-form-label">品牌名称</label>
                <div class="layui-input-inline">
                    <input class="layui-input" type="text" name="name" id="name" placeholder="完全匹配">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label for="status" class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="status" id="status">
                        <option value="">[选择状态]</option>
                        <option value="1">可用</option>
                        <option value="2">禁用</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <div class="layui-input-inline">
                    <button class="layui-btn" lay-submit lay-filter="search">查询</button>
                    <button class="layui-btn" type="button" id="clear">清空</button>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table lay-filter="dataTable" id="dataTable"></table>
    </div>
</div>
</body>
<script>
    var form, table;

    function searchForm(field = {}) {
        table.reload('dataTable', {
            where: field,
            /*强制筛选从第1页开始*/
            page: {
                curr: 1
            }
        })
    }

    $(function () {
        layui.use(function () {
            form = layui.form;
            table = layui.table;
            /*监听表单提交--数据筛选*/
            form.on("submit(search)", function ({field}) {
                searchForm(field);
                return false;
            });
            /*监听清除按钮*/
            $("#clear").click(function () {
                $("#searchForm")[0].reset();
                searchForm()
            });
            /*渲染table表格*/
            table.render({
                elem: "#dataTable",/*指定渲染的元素*/
                url: "brand/page",/*请求地址*/
                toolbar: "#tableTemplet",/*表格头部工具栏*/
                page: true,/*开启分页功能*/
                limit: 5,/*设置每页显示条数，默认值10*/
                limits: [5, 10, 20, 50, 100],/*设置可切换的条数列表*/
                /*数据内容设置*/
                cols: [[
                    {type: "checkbox", fixed: "left"},
                    {field: "id", title: "编号"},
                    {field: "name", title: "品牌名称"},
                    {field: "profile", title: "简介"},
                    {field: "status", title: "状态", templet: "#statusTemplet"},
                    {title: "操作", templet: "#optTemplet", fixed: "right"}
                ]],
                done() {
                    setButtonPower();
                }
            });
            /*监听表格内按钮点击*/
            table.on("tool(dataTable)", function ({event, data}) {
                switch (event) {
                    case "update":
                        sessionStorage.setItem("dataId", data.id)
                        layer.open({
                            type: 2,
                            title: "修改品牌",
                            area: ["450px", "400px"],
                            content: "brand/edit"
                        })
                        break;
                    case "delete":
                        layer.confirm('确定删除编号【' + data.id + '】的数据吗?', {
                            icon: 3,
                            title: "询问"
                        }, function (index) {
                            $.ajax({
                                url: "brand/delete",
                                method: "post",
                                data: {
                                    ids: data.id
                                },
                                dataType: "json",
                                success({code, msg}) {
                                    if (code === 200) {
                                        layer.msg("删除成功！", {icon: 6})
                                        table.reload('dataTable');
                                    } else {
                                        layer.alert(msg, {icon: 5});
                                    }
                                }
                            });
                            layer.close(index);
                        });
                        break;
                    default:
                        console.log("点击异常")
                        break;
                }
            });
            /*监听表头按钮点击*/
            table.on("toolbar(dataTable)", function ({event}) {
                switch (event) {
                    case "add":
                        layer.open({
                            type: 2,
                            title: "添加品牌",
                            area: ["450px", "400px"],
                            content: "brand/edit"
                        })
                        break;
                    case "delete":
                        /*获取所有被选中的行*/
                        let cs = table.checkStatus("dataTable");
                        let data = cs.data;
                        if (data.length === 0) {
                            layer.alert("请至少选择一条数据！", {icon: 7});
                            return;
                        }
                        let ids = data.map(item => item.id);
                        let idStr = ids.toString();
                        layer.confirm('确定删除【' + idStr + '】的数据吗？', {
                            icon: 3,
                            title: "批量删除"
                        }, function (index) {
                            $.ajax({
                                url: "brand/delete",
                                data: {
                                    ids: idStr
                                },
                                method: "post",
                                dataType: "json",
                                success(res) {
                                    if (res.code === 200) {
                                        layer.msg('删除成功！', {icon: 6});
                                        table.reload("dataTable");
                                    } else {
                                        layer.alert(res.msg, {icon: 5});
                                    }
                                }
                            });
                            layer.close(index);
                        })
                        break;
                    default:
                        layer.alert("按钮点击异常！", {icon: 4});
                        break;
                }
            });
        })
    })
</script>
<script type="text/html" id="optTemplet">
    <button type="button" lay-event="update" class="power layui-btn layui-btn-sm">修改</button>
    <button type="button" lay-event="delete" class="power layui-btn layui-btn-sm">删除</button>
</script>
<script type="text/html" id="tableTemplet">
    <button type="button" lay-event="add" class="power layui-btn layui-btn-sm">添加</button>
    <button type="button" lay-event="delete" class="power layui-btn layui-btn-sm">批量删除</button>
</script>
<script type="text/html" id="statusTemplet">
    {{# if(d.status === 1){ }}
    <button type="button" lay-event="status" class="layui-btn layui-btn-sm layui-bg-blue">可用</button>
    {{# }else{ }}
    <button type="button" lay-event="status" class="layui-btn layui-btn-sm layui-bg-red">禁用</button>
    {{# } }}
</script>
</html>
